<template>
	<view style="background: url(/static/index/imgbgc.png) no-repeat; background-size: 100% 100%;height: 100%;"
		class="container-index">
		<view class="" style="position: absolute;top: 50rpx; left: 30rpx;right: 30rpx;">
			<Cportrait></Cportrait>
		</view>
		<!-- <view class="" v-if="isShow">
			<view :class="{animate:flag,energyItme:true}" v-for="(item,index) in energyList"
				:style="{top:item.top + 'rpx',left:item.left + 'rpx',animationDelay:item.times + 's'}">
				<image src="@/static/index/itemImg.png" mode=""></image>
			</view>
		</view> -->
		<view class="svga">
			<view class="content" style="height: 1000rpx">
				<l-svga src="/static/svga.svga"></l-svga>
			</view>
		</view>
		<view class="Notice" style="width: 120rpx;height: 100rpx;" @tap="handleCsignInfo">
			<image src="@/static/index/l4.png" mode="" style="height: 100%;width: 100%;"></image>
			<view class="textName">{{$t('home.name3')}}</view>
		</view>
		<view class="Notice1" style="width: 120rpx;height: 100rpx;"
			@tap="$fun.jump(`/pageB/noticeList/noticeList?name=商学院课堂&type=1`)">
			<image src="@/static/index/l1.png" mode="" style="height: 100%;width: 100%;"></image>
			<view class="textName" style="margin-top: -15rpx;">商学院课堂</view>
		</view>
		<view class="Notice2" style="width: 120rpx;height: 100rpx;">
			<image src="@/static/index/l3.png" mode="" style="height: 100%;width: 100%;"></image>
			<view class="textName" style="margin-top: -15rpx;">便利生活</view>
		</view>
		<view class="pulse" style="width: 120rpx;height: 100rpx;" @tap="$fun.jump('/pageA/share')">
			<image src="@/static/index/r1.png" mode="" style="height: 100%;width: 100%;"></image>
			<view class="textName">{{$t('home.name5')}}</view>
		</view>
		<view class="pulse1" style="width: 120rpx;height: 100rpx;" @tap="$fun.jump('/pageC/robot/robot')">
			<image src="@/static/index/r3.png" mode="" style="height: 100%;width: 100%;"></image>
			<view class="textName">服务器购买</view>
		</view>
		<appUpdate v-if="appUpdateShow" :update_info="update_info" @closeModel="closeModel"></appUpdate>
		<CsignIn v-if="isCsignIn" @close="closeCsign" :list="list" day="1"></CsignIn>
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import Cportrait from '@/components/c-portrait/c-portrait.vue'
	import CsignIn from '@/components/c-signIn.vue'
	import appUpdate from "@/components/yzhua006-update/app-update.vue";
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	import {
		checkUpdate
	} from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		components: {
			headerTop,
			appUpdate,
			Cportrait,
			CsignIn
		},
		data() {
			return {
				tab_title: "云算能",
				appUpdateShow: false,
				update_info: {},
				imageList: [],
				newsList: [],
				classList: [],
				product: [],
				tabList: [],
				tabIndex: 0,
				isAnimating: false,
				flag: false,
				isShow: false,
				count: 0,
				blanceList: {},
				isCsignIn: false, // 签到是否显示
				list: [],
				throttle: false,
				energyList: [
					// {
					// 	top: 250,
					// 	left: 100,
					// 	// time: 0,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 200,
					// 	left: 250,
					// 	// time: 0.2,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 100,
					// 	left: 350,
					// 	// time: 0.4,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 200,
					// 	left: 450,
					// 	// time: 0.6,
					// 	// flag:false,
					// 	// isShow:true,
					// },
					// {
					// 	top: 250,
					// 	left: 550,
					// 	// time: 0.8,
					// 	// flag:false,
					// 	// isShow:true,
					// },
				]
			};
		},

		onShow() {
			this.$fun.ajax.post('index/index', {}).then(res => {
				// console.log(res)
				let imgList = res.data.advert
				for (var i = 0; i < imgList.length; i++) {
					imgList[i].src = this.$fun.imgUrl(imgList[i].image)
				}
				this.imageList = imgList
				this.classList = res.data.category
				this.newsList = res.data.news
				// this.product = res.data.product
			})
		},
		onReady() {},
		onLoad() {
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif
			// #ifdef MP-WEIXIN
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					const pageUrl = res.data.split('#')[1]
					uni.setStorageSync('gitH5Qrcode', JSON.stringify(pageUrl))
				}
			})
			// #endif
			// this.isFreed()
			this.$fun.showLoading()
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '云算能',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '云算能',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		mounted() {
			uni.onNetworkStatusChange(function(res) {
				console.log(res.isConnected);
				console.log(res.networkType);
			});
		},
		methods: {
			async signInfo() {
				const res = await this.$fun.ajax.post('user/signInfo')
				this.list = res.data.list
			},
			// 获取签到信息
			handleCsignInfo() {
				this.signInfo()
				this.isCsignIn = true
			},
			// 关闭签到弹窗
			closeCsign(val) {
				this.isCsignIn = val
			},
			async isFreed() {
				const systemwidth = uni.getSystemInfoSync().windowWidth
				// Math.floor(Math.random() * (max - min + 1)) + min;
				const res = await this.$fun.ajax.post('butt/isFreed')
				for (let i = 0; i < res.data.count; i++) {
					this.energyList[i] = {
						top: Math.floor(Math.random() * (400 - 200 + 1)) + 200,
						left: Math.floor(Math.random() * ((systemwidth * 2 - 300) - 50 + 1)) + 50,
						times: Math.random()
					}
				}
				if (this.energyList.length) {
					this.isShow = true
				}
			},
			async handleTap() {
				this.$fun.showLoading()
				if (this.throttle) return
				this.throttle = true
				this.flag = true
				const res = await this.$fun.ajax.post('butt/freed')
				uni.hideLoading()
				if (res.code) {
					setTimeout(() => {
						this.isShow = false
						this.throttle = false
					}, 1000)
					this.$fun.msg(res.msg)
				}
			},
			changeTab(index) {
				this.tabIndex = index
				this.getShopList(this.tabList[index].id)
			},
			getShopList(id) {

				this.$fun.ajax.post('index/type_goods', {
					type: id
				}).then(res => {
					uni.hideLoading()
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.product = res.data
				})
			},
			// 获取版本更新
			getAppInfo(type) {
				const that = this
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

				//请求获取最新版本
				plus.runtime.getProperty(plus.runtime.appid, (result) => {
					that.$fun.ajax.post('config/version', {
						version: result.version
					}).then(res => {
						that.update_info = {
							version: res.data.version, //线上版本
							now_url: res.data.pkgUrl, //更新链接
							silent: res.data.silent, //是否是静默更新
							force: res.data.force, //是否是强制更新
							net_check: res.data.net_check, //非WIfi是否提示
							note: res.data.content, //更新内容
						}
						checkUpdate(that.update_info, type, that).then(res => {
							if (res.data) {
								that.appUpdateShow = true
							} else {
								// this.$fun.msg(res.msg)
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
				})

			},
			closeModel() {
				this.appUpdateShow = false
			},
			jump(url) {
				this.$fun.jump(url)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 98vh;
		background-color: #fff;
	}

	.container-index {
		height: 100%;

		.image {
			position: relative;
			height: 100%;

			.logo {
				height: 100%;
				width: 100%;
			}
		}

		.textName {
			font-family: PingFang SC, PingFang SC;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #d1d1d1;
			line-height: 28rpx;
		}

		.my {
			position: absolute;
			top: 620rpx;
			left: 120rpx;

			.textName {
				color: #232323;
			}
		}

		.Notice {
			position: absolute;
			top: 250rpx;
			left: 15rpx;
		}

		.svga {
			.content {
				width: 1200rpx;
				height: 500rpx;
				position: absolute;
				top: 15%;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.Notice1 {
			position: absolute;
			top: 420rpx;
			left: 15rpx;
		}

		.Notice2 {
			position: absolute;
			top: 570rpx;
			left: 15rpx;
		}

		.Notice3 {
			position: absolute;
			top: 730rpx;
			left: 15rpx;
		}

		.pulse {
			position: absolute;
			top: 250rpx;
			right: 15rpx;
		}

		.pulse1 {
			position: absolute;
			top: 420rpx;
			right: 15rpx;
		}

		.pulse2 {
			position: absolute;
			top: 570rpx;
			right: 15rpx;
		}

		.pulse3 {
			position: absolute;
			top: 720rpx;
			right: 15rpx;
		}


		.device {
			position: absolute;
			top: 500rpx;
			right: 15rpx;
		}

		.Coupons {
			position: absolute;
			top: 75%;
			left: 50%;
			right: 0;
			transform: translateX(-50%);
			width: 360rpx;
			height: 100rpx;
		}

		.balance {
			position: absolute;
			top: 620rpx;
			right: 120rpx;

			.textName {
				color: #232323;
			}
		}

		.bottom {
			position: absolute;
			top: 750rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 60rpx;
			text-align: center;

			.bottom-item {
				width: 33%;
				height: 90rpx;

				.num {
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 40rpx;
					color: #232323;
					line-height: 47rpx;
				}

				.textName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #232323;
					line-height: 28rpx;
				}
			}
		}

		.energyItme {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: 200rpx;
			left: 200rpx;
			animation: identifier 3s linear infinite;
			// transition: all 2s;
		}

		.animate {
			animation: exampleAnimation 1s linear;
		}

		@keyframes exampleAnimation {
			0% {
				opacity: 1;
				transform: translateY(10rpx);
			}

			100% {
				opacity: 0;
				transform: translate(-50%, 400rpx);
				left: 50%;
			}
		}

		@keyframes identifier {
			0% {
				transform: translateY(0rpx);
			}

			50% {
				transform: translateY(30rpx);
			}

			100% {
				transform: translateY(0rpx);
			}
		}
	}

	.content-top {
		padding: 20rpx;
		margin: 0 0 30rpx;
		height: 300rpx;
	}

	.inform {
		margin: 20rpx 30rpx;

		.inform-info {
			display: flex;
			padding: 0 20rpx;
			height: 50rpx;
			background: #e0eefe;
			border-radius: 30rpx;

			.picture {
				display: flex;
				align-items: center;
				margin-right: 30rpx;

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}

			.info {
				width: 80%;
				height: 100%;

				.swiper {
					width: 100%;
					height: 100%;

					.swiper-item {
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;

						text {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}

	.shopBox {
		.tabLists {
			background: #FFFFFF;
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-around;

			.tabItem {
				height: 100%;
				color: #888888;
				font-size: 28rpx;
				line-height: 80rpx;
				border-bottom: 4rpx solid transparent;
			}

			.active {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom: 10rpx solid #1E84F1;
			}
		}

		.shopList {
			padding: 32rpx;
			background: #f5f9ff;

			.shopItem {
				padding: 15rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 24rpx;

				.shopInfo {
					display: flex;
					align-items: center;

					image {
						width: 172rpx;
						height: 172rpx;
					}

					.info {
						padding: 10rpx;
						width: 100%;
					}

					.title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}

					.title1 {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #888888;
					}

					.money {
						color: #ff3456;

						text {
							font-size: 44rpx;
						}
					}

					.tagBox {
						margin-top: 35rpx;
						display: flex;
						flex-wrap: wrap;

						.tag {
							padding: 6rpx 14rpx;
							color: #1e84f1;
							border: 2rpx solid #1e84f1;
							border-radius: 4rpx;
							font-size: 20rpx;
							margin-right: 10rpx;

						}
					}
				}

				.btn {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					background-color: #1E84F1;
					color: #fff;
					margin: 10rpx 0;
				}
			}
		}
	}
</style>